<%--
  Created by IntelliJ IDEA.
  User: guanz
  Date: 2023/3/7
  Time: 9:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%--先从page  request session application 对象属性中寻找--%>
${msg}
<div></div>
<form action="AccountServlet?flag=checkName" method="post">
    用户名:<input type="text" name="accountName" id="accountNameId" value="" onblur="checkName()"><br>
    <input type="submit" value="注册">
</form>
</body>
<script>
    var xmlHttpRequest;
    function checkName(){
        // 创建请求对象 发送数据
        // 非IE内核创建方式
       xmlHttpRequest = new XMLHttpRequest();
       // 获取填写的用户名
        var accountName = document.getElementById("accountNameId").value;
        // 发送的路径
        var url = "AccountServlet?flag=checkName&accountName="+accountName;
        // 调用open方法发送  get表示请求的方式  url地址  true表示是异步
        xmlHttpRequest.open("GET",url,true);
        xmlHttpRequest.onreadystatechange=callback;// 每次监控状态的改变会执行该方法  没有小括号
        xmlHttpRequest.send(null);
    }
    function callback(){
        // 请求已完成，且响应已就绪  响应正常
        if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
            // 获取响应的内容
            // responseText 获得字符串形式的响应数据。
           //  responseXML获得 XML 形式的响应数据。
           //  if(xmlHttpRequest.responseText=='ok'){
           //      document.getElementsByTagName("div")[0].innerHTML="<font color='green'>该用户名可以使用</font>";
           //  }else{
           //      document.getElementsByTagName("div")[0].innerHTML="<font color='red'>该用户名已被注册</font>";
           //  }
            console.log(xmlHttpRequest.responseXML);
            var xml= xmlHttpRequest.responseXML;
            console.log(xml.getElementsByTagName("response")[0].childNodes[0].innerHTML);
        }
    }
</script>
</html>
